<template>
	<view class="editUser">
		<u-picker :show="ifEditSex" :columns="sexColumns" keyName="label" @cancel="ifEditSex=false" @confirm="editSex">
		</u-picker>
		<u-toast ref="uToast"></u-toast>
		<view class="edit">
			<u-cell-group :border="false">
				<view class="cell">
					<u-divider text="请选择性别 :" textPosition="left"></u-divider>
					<u-cell :isLink="true" :title="sex" @click="ifEditSex=true"></u-cell>
				</view>

				<view class="cell">
					<u-divider text="请输入年龄 :" textPosition="left"></u-divider>
					<u--input v-model='age' placeholder="年龄" type="number"
						prefixIconStyle="font-size: 22px;color: #909399" class="uInput"></u--input>
				</view>
			</u-cell-group>
		</view>
		<u-button type="primary" text="点击编辑" @click="editUser"></u-button>

	</view>
</template>

<script>
	import {
		tokenToUser
	} from '@/utils/init.js'
	export default {
		data() {
			return {
				ifEditSex: false,
				sex: this.$store.state.user.user.sex,
				sexColumns: [
					[{
						label: '男'
					}, {
						label: '女'
					}]
				],
				age: this.$store.state.user.user.age
			}
		},
		computed: {},
		methods: {
			editSex(e) {
				this.sex = e.value[0].label
				this.ifEditSex = false
			},
			editUser() {
				var {
					sex,
					age
				} = this
				this.$myRquest({
					url: '/user/edit',
					method: 'post',
					data: {
						sex,
						age
					}
				}).then(res => {
					tokenToUser()
					this.$refs.uToast.show({
						message: '编辑成功',
						type: 'success',
						duration: 1000
					})
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.edit {
		margin-top: 30rpx
	}

	.cell {
		margin: 25rpx 0rpx;
	}
</style>
